<template>
  <div class="container">
    <div>

      <div class="header">
        <div class="btn">
          <span style="font-weight: 600; width: 70px">关键字</span>
          <el-input v-model="input" placeholder="根据编号搜索"></el-input>
        </div>
        <el-row>
          <el-button size="small" @click="removeClick()">清除</el-button>
          <el-button
            type="primary"
            size="small"
            @click="searchClick(input)"
          >搜索</el-button>
        </el-row>
      </div>
      <el-alert :closable="false" show-icon>
        <span>数据一共{{ num }}条</span>
      </el-alert>
      <!-- 头部导航end -->
      <!-- 表格数据渲染start -->

      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="200"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType == 1">单选</span>
            <span v-else-if="scope.row.questionType == 2">多选</span>
            <span v-if="scope.row.questionType == 3">简答</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="题目编号" width="200">
          <template slot-scope="scope">
            <el-link
              v-for="(item,index) in scope.row.questionIDs"
              :key="index"
              type="primary"
              :underline="false"
              @click="popupFn( item.id)"
            >{{ item.number }}</el-link>

          </template>
        </el-table-column>

        <el-table-column prop="addTime" label="录入时间" width="200">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column prop="" fixed="right" width="180" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              circle
              @click="open(row)"
            >
            </el-button>
            <!-- <el-button type="danger" icon="el-icon-delete" circle></el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格数据渲染end -->
      <!-- 分页start -->
      <div class="pageBox">
        <div class="block">
          <el-pagination
            background
            :page-sizes="[20, 30, 50, 100]"
            layout=" prev, pager, next, sizes, jumper"
            :total="num"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 分页end -->
    </div>
    <el-dialog

      title="题目预览"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-descriptions title="用户信息" :column="4">
        <el-descriptions-item label="【题型】">{{ data. questionType==='1'?'单选题':data.questionType==='2'?'多选题':'简答题' }}</el-descriptions-item>
        <el-descriptions-item label="【编号】">{{ data.id }}</el-descriptions-item>
        <el-descriptions-item label="【难度】">{{ data.difficulty==='1'?'简单':'2'?'一般':'困难' }}</el-descriptions-item>
        <el-descriptions-item label="【标签】">{{ data.tags }}</el-descriptions-item>
        <el-descriptions-item label="【学科】">{{ data.subjectName }}</el-descriptions-item>
        <el-descriptions-item label="【目录】">{{ data.directoryName }}</el-descriptions-item>
        <el-descriptions-item label="【方向】">{{ data.direction }}</el-descriptions-item>
      </el-descriptions>
      <hr>
      <p>【题干】:</p>
      <div>{{ data.question }}</div>
      <div v-if="data.questionType!=='3'">
        <p>{{ data.questionType==='1'?'单选题选项(以下选中的选项为正确答案)':'2'?'多选题选项(以下选中的选项为正确答案)':'' }}</p>

        <p v-for="item in data.options" :key="item.id"><el-checkbox :checked="item.isRight===0?false:true">{{ item.title }}</el-checkbox></p>
      </div>
      <hr>
      <div>

        【参考答案】:  <el-button type="danger" size="mini" @click="dete=true">视频答案预览</el-button>
        <video v-if="dete" preload="metadata" controls :src="data.videoURL"></video>
      </div>
      <hr>
      <div>
        【答案解析】:{{ data.answer }}

      </div>
      <hr>
      <div>

        【题目备注】:{{ data.remarks }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleFn">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  data() {
    return {
      data: {},
      dete: false,
      num: 50,
      dialogVisible: false,
      randoms: [],
      tableData: [],
      input: '', // 定义输入框的值

      page: {
        page: 1,
        pagesize: 20
      }
    }
  },

  created() {
    this.getData()// 调用获取数据的方法
    // this.deleteRow()// 调用删除数据的方法
  },

  methods: {
    dialogVisibleFn() {
      this.dialogVisible = false
      this.dete = false
    },
    popupFn(id) {
      this.dialogVisible = true
      detail({ id }).then((res) => {
        this.data = res.data
        // eval(this.data.question)
        console.log(this.data)
      })
    },
    searchClick() {
      this.page.pagesize = this.num
      this.searchRandoms()
    },
    async searchRandoms() {
      const res = await randoms(this.page)
      this.randoms = res.data.items
      const arr = this.randoms.filter((item) => {
        if (item.id.indexOf(this.input) !== -1) {
          return item
        } else {
          return false
        }
      })
      console.log(arr)
      if (this.input !== '') {
        this.tableData = arr
        this.num = arr.length
      } else {
        this.getData()
      }
    },
    removeClick() { // 定义点击清楚按钮，清楚搜索框中的内容
      this.input = ''
    },
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeRandoms({ id })
        this.getData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    async getData() { // 获取数据渲染列表
      const res = await randoms(this.page)
      // console.log(res)
      this.num = res.data.counts
      this.tableData = res.data.items

      // this.num = res.data.counts
    },

    // 监听pagesize的变化
    handleSizeChange(val) {
      // console.log(1223)
      this.page.pagesize = val
      this.getData()
    },
    // 监听页码值改变的事件
    handleCurrentChange(val) {
      console.log(val)
      this.page.page = val
      this.getData()
    }
  }
}
</script>

<style scoped lang='scss'>

.container {
  background-color: #fff;
  padding: 15px;
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    span {
      margin-right: 15px;
    }
  }
  el-alert {
    margin-bottom: 15px;
  }
  el-table {
    display: flex;
    justify-content: space-around;
  }
  .pageBox {
    float: right;
    margin-top: 10px;
  }
}
.btn {
  display: flex;
  align-items: center;
}

</style>
